<template>
  <div class="condition-item">
    <h2 class="condition-title"><span class="font16">{{condition.name}}</span></h2>
    <p class="condition-subtitle"><span class="font12">筛选条件</span></p>
    <div>
      <v-controls>
        <div class="control-item-wrap" :key="i" v-for="(item , i) in controls">

          <!-- 暂定移除 且或 关系，后面可能加回来，先不要删除 -->
          <!-- <v-button style="margin-bottom: 15px;"
            v-if="i !== 0"
            :width="30" :btnText="item.relation === 'and' ? '且' : '或'"
            @on-click="hanldeRelationToggle(i)"></v-button> -->

          <v-control-item
            :value="item"
            :options="condition.options"
            @add="addControl(i)"
            @del="delControl(i)"
            @onChange="handleChange($event, i)"></v-control-item>
        </div>
      </v-controls>

      <div class="add-condition" @click="addControl">
        <el-button type="primary" plain icon="el-icon-plus"></el-button>
        <span>筛选条件</span>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import VControls from './controls'
import VControlItem from './controlItem'
import {VButton} from '../../../../components'

export default {
  name: 'VConditionItem',

  components: {
    VButton,
    VControls,
    VControlItem
  },

  props: {
    condition: {
      type: Object,
      required: true
    }
  },

  watch: {
    condition () {
      this.initControls()
    }
  },

  data () {
    return {
      controls: []
    }
  },

  mounted () {
    this.initControls()
  },

  methods: {
    initControls () {
      const controls = this.condition.controls || []
      this.controls = [...controls]
    },

    addControl (i) {
      if (typeof i === 'number') {
        this.$emit('onAddControl', i)
      } else {
        this.$emit('onAddControl')
      }
    },

    delControl (i) {
      if (typeof i === 'number') {
        this.$emit('onDelControl', i)
      }
    },

    handleChange (value, i) {
      this.controls[i] = value
      this.condition.controls = this.controls
    }

    // 暂定移除 且或 关系，后面可能加回来，先不要删除
    /* hanldeRelationToggle (i) {
      const relation = this.controls[i].relation
      this.controls[i].relation = (relation === 'and' ? 'or' : 'and')
    } */
  }
}
</script>

<style lang="stylus" scoped>
.condition-item
  color #5a5e66

  .condition-title
    margin 10px 0
    font-size 16px

  .condition-subtitle
    margin 10px 0
    text-indent 2em

  .add-condition
    width 150px
    height 50px
    line-height 50px
    cursor pointer

    .el-button
      width 30px
      height 30px
      display inline-block
      padding 0

      .el-icon-plus
        font-size 16px
        font-weight bold

    span
      font-size 12px
      color #016DFB
      margin-left 10px

  .control-item-wrap
    margin-bottom 15px

    &:last-of-type
      margin-bottom 0
</style>
